<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>花瓣动画</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    .petal {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #ffcc00; 
      border-radius: 50%;
      pointer-events: none; 
      animation: fall 5s linear infinite;
    }

    @keyframes fall {
      to {
        transform: translateY(100vh); 
      }
    }
  </style>
</head>
<body>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const petalsContainer = document.body;

    function createPetal() {
      const petal = document.createElement("div");
      petal.className = "petal";
      petalsContainer.appendChild(petal);
      petal.style.left = `${Math.random() * window.innerWidth}px`;
      petal.style.animationDuration = `${Math.random() * 2 + 3}s`; // 不同花瓣的下落速度略有不同
    }
    for (let i = 0; i < 50; i++) {
      createPetal();
    }

    document.addEventListener("mousemove", function (event) {
      const petals = document.querySelectorAll(".petal");
      petals.forEach((petal) => {
        petal.style.display = "none";
      });
    });

    document.addEventListener("mouseleave", function () {
      const petals = document.querySelectorAll(".petal");
      petals.forEach((petal) => {
        petal.style.display = "block";
      });
    });
  });
</script>

</body>
</html>
